<template>
	<div>
		<search></search>
		<recuser></recuser>
		<div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header mui-card-media">
				<img style="width: 52px;height: 52px;" src="../../assets/user/picture.jpg" />
				<div class="mui-media-body">
					<h3 style="margin-left: 15px;">Jackie</h3>
					<p style="margin-top: 8px;margin-left: 15px;">发表于 2019-06-30 15:30</p>
				</div>
				<div><mt-button size="small" type="primary" @click="alertbox">关注</mt-button></div>
			</div>
			<!--内容区-->
			<div class="mui-card-content">
				<img style="width: 100%;" src="../../assets/user/picture1.jpg" />
				<h4>在塞尔泮湖的第一天</h4>
			</div>
			<!--页脚，放置补充信息或支持的操作-->
			<div class="mui-card-footer">
				<span class="mui-icon mui-icon-star"><br /><h6>100</h6></span>
				<span class="mui-icon mui-icon-chatbubble"><br /><h6>999</h6></span>
				<span class="mui-icon mui-icon-paperplane"><br /><h6>179</h6></span>
			</div>
		</div>
		
		<div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header mui-card-media">
				<img style="width: 52px;height: 52px;" src="../../assets/tx3.jpg" />
				<div class="mui-media-body">
					<h3 style="margin-left: 15px;">Macintosh</h3>
					<p style="margin-top: 8px;margin-left: 15px;">发表于 2019-06-28 11:30</p>
				</div>
				<div><mt-button size="small" type="primary">关注</mt-button></div>
			</div>
			<!--内容区-->
			<div class="mui-card-content">
				<img style="width: 100%;" src="../../assets/2.jpg" />
				<h4>夕阳下的他们</h4>
			</div>
			<!--页脚，放置补充信息或支持的操作-->
			<div class="mui-card-footer">
				<span class="mui-icon mui-icon-star"><br /><h6>100</h6></span>
				<span class="mui-icon mui-icon-chatbubble"><br /><h6>999</h6></span>
				<span class="mui-icon mui-icon-paperplane"><br /><h6>179</h6></span>
			</div>
		</div>
		
	</div>
</template>

<script>
import search from '../public/search.vue'
import recuser from '../public/recuser.vue'
    export default {
        //2.然后,在components中写入子组件
        components: {search,recuser},
        methods: {
        	alertbox () { 
        		MessageBox.alert('提示', '关注成功'); 
        	},
        },
    }

</script>

<style>
.mint-button--small{
	margin-top: 5px;
	height: 25px;
}

</style>